
<template>
    <ContentWrap>
        <el-form :model="query" class="mb-20px" @submit.enter.prevent="queryFirstHandle">
            <ElRow :gutter="20" justify="space-between">
                <ElCol :span="14">
                    <div class="">
                        <el-button type="primary" @click="infoModalVisible = true">添加FTP</el-button>
                        <el-button type="info" @click="updatePortHandle">修改FTP端口</el-button>
                    </div>
                </ElCol>
                <!-- <ElCol class="" :span="10">
                    <div class="flex justify-end">
                        <el-input class="max-w-[200px]" clearable v-model="query.keyword" placeholder="请输入数据库名称">
                            <template #suffix>
                                <Icon icon="ant-design:search-outlined" :size="18"></Icon>
                            </template>
                        </el-input>
                    </div>
                </ElCol> -->
            </ElRow>
        </el-form>
        <el-table :data="pageData.list"  v-loading="loading" header-row-class-name="cc-table" border highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column prop="userName" label="用户名" width="180" show-overflow-tooltip />
            <el-table-column prop="password" label="密码" width="180" show-overflow-tooltip />
            <el-table-column prop="schemaUser" label="状态" width="180" show-overflow-tooltip />
            <el-table-column prop="rootPath" label="根目录" width="180" show-overflow-tooltip />
            <el-table-column prop="schemaKey" label="容量" width="180" show-overflow-tooltip />
            <el-table-column prop="note" label="备注" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="updatePortHandle">改密</el-button>
                    <el-button link type="primary" size="small" @click="updatePortHandle">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end p-t-10px">
            <el-pagination
v-model:current-page="queryPage.pageNumber" v-model:page-size="queryPage.pageSize"
                :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
                @size-change="queryFirstHandle" @current-change="searchHandle" />
        </div>
    </ContentWrap>
    <infoModal v-model="infoModalVisible"  @confirm="searchHandle"></infoModal>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { getListAllUsersFTPAPI } from "@/api/systemMonitor/index"
import { ContentWrap } from '@/components/ContentWrap'
import infoModal from './components/infoModal.vue'
import { ElMessage } from 'element-plus'

//table loading
const loading = ref(false)
const infoModalVisible = ref(false)
const query = reactive({
    keyword: ""
})
const queryPage = reactive({
    pageNumber: 1,
    pageSize: 10
})
const pageData = reactive({
    list: null,
    total: 0
})

onMounted(() => {
    queryFirstHandle()
})

//查询第一页
const queryFirstHandle = () => {
    queryPage.pageNumber = 1
    searchHandle()
}
//查询
const searchHandle = () => {
    loading.value = true;
    getListAllUsersFTPAPI({ ...queryPage }).then((res) => {
        pageData.list = res.data.list
        pageData.total = res.data.total
    }).finally(() => {
        loading.value = false;
    })
}
// 修改FTP端口
const updatePortHandle=()=>{
    ElMessage.error("待开发")
}
</script>
